<template>
  <div class="components-container">
    <custom-tabs
      class="tabs"
      :menus="menus"
      :activeName="menus[0].key"
      v-on:tabsClick="tabsClick"
    ></custom-tabs>
    <component :is="activeName"></component>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import riskUser from './components/riskUser.vue'
import activityInfo from './components/activityInfo.vue'
import riskInfo from './components/riskInfo.vue'
import assetsInfo from './components/assetsInfo.vue'
// import urgent from './components/urgent.vue'
import CustomTabs from '@/components/Tabs/custom-tabs.vue'
@Component({
  name: 'incomingDetail',
  components: {
    //引用的组件在这里声明
    riskUser,
    activityInfo,
    riskInfo,
    assetsInfo,
    // urgent,
    CustomTabs
  }
})
export default class extends Vue {
  private activeName = 'riskUser'
  private menus = [
    {
      key: 'riskUser',
      value: '个人信息'
    },
    {
      key: 'activityInfo',
      value: '运营信息'
    },
    {
      key: 'riskInfo',
      value: '风控信息'
    },
    {
      key: 'assetsInfo',
      value: '资产信息'
    }
  ]
  private activityKey = 'summary'
  private tableLoading = true
  mounted() {}
  // methods: {
  //   // handleClick(index) {
  //   //     this.activeName = index;
  //   // },
  private tabsClick(activityKey: any) {
    this.activityKey = activityKey
    this.activeName = activityKey
  }
  // }
}
</script>

<style scoped>
.risk-tabs {
  display: block;
  background-color: #fff;
  height: 40px;
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}
.risk-tabs li {
  float: left;
  line-height: 40px;
  list-style-type: none;
  width: 180px;
  text-align: center;
  cursor: pointer;
}
.risk-tabs li.active {
  background-color: rgb(64, 158, 255);
  color: #fff;
}
</style>
